<template>
    <div class="version pdTop">
        <b-container>
            <b-row>
                <b-col xl="7" lg="7" md="7" sm="12">
                    <h2 class="pdBot">{{$t('home.version.title')}}</h2>
                    <p>{{$t('home.version.desc')}}</p>
                    <div class="imgs">
                        <b-row>
                            <b-col cols="3" v-for="(way,index) in $t('home.version.ways')" :key="index">
                                <div class="img"><img :src="require(`../images/vision-img-${index+1}.png`)"/></div>
                                <p>{{way}}</p>
                            </b-col>
                        </b-row>
                    </div>
                </b-col>
                <b-col xl="5" lg="5" md="5" sm="12">
                    <img src="../images/vision.gif" class="img-fluid"/>
                </b-col>
            </b-row>
        </b-container>
    </div>
</template>

<style lang="scss" scoped>
.version{
    .imgs{
        width: 75%;
        margin-top: 50px;
        margin-bottom: 50px;
        text-align:center;
        .img{
            height: 40px;
            position: relative;
            cursor: pointer;
            margin-bottom: 10px;
            transition: transform 0.5s;
            img{
                width: auto;
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translate(-50%);
            }
            &:hover{
                transform: rotateY(180deg);
            }
        }
    }
}
</style>

